<script setup>
import {ref} from "vue";
import axios from '@/axios/index.js'
import Markdown from "@/views/course/Markdown.vue";
import CourseHomeWork from "@/views/course/CourseHomeWork.vue";
import CourseFeedback from "@/views/course/CourseFeedback.vue";

const checkData = ref([])
/** 存储课程树形结构数据 */
// const data = ref([])
/** 单击节点的数据 */
const nodeData = ref({});
/** 当前激活的标签页名称 */
const activeName = ref('课件');
const currentCourseId = ref(null); // 新增：用于存储当前选中的课程ID
const classId = ref()
const studentId = ref();  //学生id
const homeworkId = ref();  //初始化作业id
const homeworkIds = ref([])
const loading = ref(false); // 添加 loading 状态
// 课程信息数据
let data1 = ref([]);
let data2 = ref([]);
// 课程数据
let data = ref([]);
/**
 * 格式化课程数据为树形结构
 * @param course 原始课程数据
 * @returns {{children: (*|*[]), label: *, completed: boolean, id, courseContent: (string|*)}} 格式化后的课程对象
 */
const formatCourse = (course) => ({
  label: course.courseName,
  completed: false,
  courseContent: course.courseContent,
  id: course.id,
  children: course.children ? course.children.map(formatCourse) : [],
});

/**
 * 获取课程列表树形结构数据
 */
/*const getCourseTree = () => {
  loading.value = true; // 开始加载
  axios.get("/api/v1/front/course/pid/0/status/1").then(res => {
    data.value = res.data.data.map(formatCourse);
    compareCourseProgress(data.value)
  }).finally(() => {
    loading.value = false
  });
}*/
// 调用获取课程树的方法


// 获取班级的所有课程
async function getCourseTree() {
  // console.log(classId.value)
  loading.value = true;

  axios.get("api/v1/admin/course/selectCourseByClassId",{params:{
      classId:classId.value,
    }}).then((resp) => {
    // console.log(resp);
    data1 = resp.data.data
    // console.log(data1)
  })
  axios.get("api/v1/class/getClassInfo", {
    params: {
      classId: classId.value,
    }
  }).then((resp) => {
    // console.log(resp);
    data2 = resp.data.data
    axios.get("api/v1/admin/course/selectAllCourseByClassId", {
      params: {
        classId: classId.value,
        pid: 0,
        status: 1,
        subjectId: data2.subjectId
      }
    }).then((resp) => {

      loading.value = false;
      data = resp.data.data
      // console.log(data)
      if (data1 !== undefined) {
        compareCourseProgress()
        // console.log(1)
      } else {
        // console.log(data1)
        compareCourseProgress()

      }
    });
  })
}

// 对已经学过的课程变灰处理
const customNodeClass = (data, node) => {
  // console.log(data)
  if (data.finished) {
    return "finished";
  }
  return "unfinished";
};

// 对比进度进行变色处理
function compareCourseProgress() {
  // console.log(1)

  function checkCourseFinished(course) {
    const isFinished = data1.some((progressCourse) => progressCourse.id === course.id);
    course.finished = isFinished;
    // ?"finished":"unfinished"
    // console.log(isFinished)
    // console.log(course.id)
    if (course.children) {
      course.children.forEach(childCourse => checkCourseFinished(childCourse));
    }
  }

  data.forEach(course => checkCourseFinished(course));
}

/**
 * 处理节点点击事件
 * @param data  被点击的节点数据
 */
const handleNodeClick = (data) => {
  nodeData.value = data;
  currentCourseId.value = data.id;  // 保存当前选中的课程ID
  fetchCourseHomework()
};
const props = {
  label: "courseName",
  children: "children",
  // disabled:"finished"
  class: customNodeClass
};
/**
 * 根据课程id和学生id获取作业数据
 */
const fetchCourseHomework = () => {
  axios.get(`/api/v1/front/course/homework`, {
    params: {
      courseId: currentCourseId.value,
      studentId: studentId.value
    }
  }).then(res => {
    homeworkIds.value = []
    // console.log(res.data.data)
    if (res.data.data.length > 0) {
      homeworkIds.value = res.data.data.map(item => item.homeworkId)
    }
  })
};

const getUser = () => {
  const student = JSON.parse(localStorage.getItem("student"))
  studentId.value = student.studentInfo.studentId
  classId.value = student.studentInfo.classId
  // console.log(student.studentInfo)
}

//对已经学过的课程变灰处理
/*const customNodeClass = (data, node) => {
  return data.finished ? "finished" : "unfinished";
}*/
//课程点击事件
const nodeClick = (node, nodeAttr, TreeNode, event) => {
  console.log(node)
  console.log(nodeAttr)
  console.log(TreeNode)
  console.log(event)
}
getUser()
getCourseTree()
</script>

<template>
  <div class="left" v-loading="loading" element-loading-text="加载中...">  <!--v-if="data.length"-->
    <el-tree
        style="width: 215px"
        :data="data"
        default-expand-all
        @node-click="handleNodeClick"
        :props="props"
        :highlight-current="true"
    >
      <template #default="{ node, data }">
        <span :class="data.finished?'finished':''">
        {{ data.courseName }}
      </span>
      </template>
    </el-tree>
  </div>
  <div class="right">
    <el-tabs v-model="activeName">
      <el-tab-pane label="课件" name="课件">
        <br/>
        <br/>
        <Markdown :data="nodeData"/>
      </el-tab-pane>
      <el-tab-pane label="作业" name="作业">
        <CourseHomeWork :activeName="activeName" :studentId="studentId" :homeworkIds="homeworkIds"
                        :courseId="currentCourseId" v-if="currentCourseId"/>
      </el-tab-pane>
      <el-tab-pane label="反馈" name="反馈">
        <CourseFeedback v-if="currentCourseId" :courseId="currentCourseId" :studentId="studentId"/> <!-- 传递当前课程ID -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>


.left {
  width: 300px;
  border-right: 1px solid #BBBBBB;
  box-sizing: border-box;
  padding-top: 50px;
  padding-left: 80px;
  height: 95%;
}

/*已学习节点颜色*/


/*未学习节点颜色*/


.right {
  flex: 1;
  padding: 30px 30px;
}

.finished {
  color: #ababab; /* 改变颜色为灰色 */
  cursor: not-allowed; /* 更改鼠标样式 */
}
</style>
